<template>
	<view class="Case">
		<navBar title="案例推荐" isBack></navBar>
		<view class="i_demo" >
			<!-- <view class="i_dOper" @click="openurl(1)"><text>更多</text><view class="i_doIcon"><view class="iconfont icon-more"></view></view></view>
			<view class="i_dTitle">推荐案例</view> -->
			<view class="i_dList">
				<view class="i_dItem" v-for="(item,index) in getRecommendList" :key="index"
					@click="navTo('/pages_design/pages/design/demo/demo?caseId=' + item.id)"
					style="box-shadow: 0rpx 0rpx 16rpx rgba(0, 0, 0, 0.06);">
					<view class="i_dImg">
						<image
							:src="item.thumb_url[0].path || 'https://cos.ryz1620.com/liankun/static/IMG279.png'">
						</image>
					</view>
					<view style="padding:0 24rpx 0rpx 24rpx;">
						<view class="i_dTit omit-2 ellipsisText">{{item.title}}</view>
						<view class="i_dTags">
							<view class="i_dTag" v-for="(items,indexs) in item.design_style" :key="indexs">
								{{items.name}}
							</view>
						</view>
						<view class="i_dUser">
							<view class="i_dRemark">{{item.area}}m² | {{item.offer}}万</view>
							<view class="i_dHead">
								<image
									:src="item.avatar.path || 'https://cos.ryz1620.com/liankun/static/IMG280.png'">
								</image>
							</view>
							<view class="i_dName">{{item.username ||'***'}}</view>
						</view>
					</view>
				</view>
		
			</view>
			<!-- GoPage -->
			<!-- <view class="i_design_btn">查看更多案例</view> -->
		</view>
	</view>
</template>

<script>
	import URL from '@/config/url.js';
	import navBar from '@/components/navBar/navBar.vue';
	import service_design from '@/service/design'
	import service_mall from '@/service/mall.js'
	export default {
		data() {
			return {
				token: '',
				userMobile: '',
				getRecommendList: [],
			};
		},
		computed: {},
		watch: {},
		created() {},
		mounted() {},
		onLoad() {
			this.$utils.getUrl()
			var that = this
			this.getRecommend();
		},
		onShow() {
			
			this.userMobile = this.$store.state.index.userMobile
			this.token = uni.getStorageSync('token')
		},
		methods: {
			// 推荐案列
			getRecommend() {
				service_design.getRecommend({}).then(res => {
					if (res.code == 1) {
						this.getRecommendList = res.data
					}
				});
			},
			navTo(url) {
				uni.navigateTo({
					url
				})
			},
		}
	};
</script>

<style lang="scss">
	page{
		background: #f2f2f2;
	}
	.ellipsisText {
		text-overflow: -o-ellipsis-lastline;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
	}
	// 推荐案例
	.i_demo {
		border-top: 1px solid #f6f7fb;
		padding-top: 32rpx;
		// padding-bottom: 24rpx;
	
		.i_dOper {
			height: 62rpx;
			line-height: 62rpx;
			font-size: 24rpx;
			padding: 0 64rpx;
			margin-top: 30rpx;
			position: relative;
			float: right;
	
			.i_doIcon {
				width: 32rpx;
				height: 32rpx;
				line-height: 32rpx;
				text-align: center;
				color: #6c6c6c;
				font-size: 32rpx;
				margin-top: -16rpx;
				position: absolute;
				top: 50%;
				right: 32rpx;
			}
		}
	
		.i_dTitle {
			height: 110rpx;
			line-height: 122rpx;
			font-size: 36rpx;
			font-weight: bold;
			padding-left: 32rpx;
		}
	
		.i_dList {
			padding: 0 32rpx;
			display: flex;
			align-items: center;
			flex-wrap: wrap;
			justify-content: space-between;
		}
	
		.i_dItem {
			width: 332rpx;
			height: 492rpx;
			margin-bottom: 24rpx;
			border-radius: 10rpx;
			overflow: hidden;
			background: #fff;
		}
	
		.i_dImg {
			width: 100%;
			height: 276rpx;
			background: #f6f7fb;
			overflow: hidden;
		}
	
		.i_dTit {
			line-height: 36rpx;
			font-size: 24rpx;
			margin-top: 14rpx;
		}
	
		.i_dTags {
			margin-top: 12rpx;
		}
	
		.i_dTag {
			height: 36rpx;
			line-height: 36rpx;
			color: #a98f68;
			font-size: 20rpx;
			padding: 0 16rpx;
			margin-right: 8rpx;
			border-radius: 18rpx;
			background: #f9f6f3;
			display: inline-block;
		}
	
		.i_dUser {
			color: #939393;
			margin-top: 16rpx;
		}
	
		.i_dRemark {
			height: 36rpx;
			line-height: 36rpx;
			font-size: 20rpx;
			float: right;
		}
	
		.i_dHead {
			width: 36rpx;
			height: 36rpx;
			margin-right: 8rpx;
			border-radius: 50%;
			background: #f6f7fb;
			overflow: hidden;
			float: left;
		}
	
		.i_dName {
			height: 36rpx;
			line-height: 36rpx;
			font-size: 20rpx;
			overflow: hidden;
		}
	
		.i_design_btn {
			width: 100%;
			height: 88rpx;
			background: #F8F8F8;
			border-radius: 4rpx;
			font-size: 28rpx;
			font-weight: 600;
			line-height: 88rpx;
			color: #333333;
			text-align: center;
			margin: 0 32rpx 0rpx 32rpx;
		}
	}

</style>
